import ECharts from 'vue-echarts'
import 'echarts/src/chart/pie'
import {queryBuildingGeneral, queryBuildingTab, queryRoomTab, sendMsg} from '../api/overview'
import { mapState } from 'vuex'
import $echarts from '@/utils/echarts'
export default {
    data() {
        return {
            simplebar: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 30,
                    data: [],
                    itemWidth:12,
                    itemHeight:12,
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['35%', '70%'],
                        center: ['25%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                        ]
                    }
                ]
            },
            circular: {
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b}: {c} ({d}%)'
                },
                legend: {
                    orient: 'vertical',
                    right: 30,
                    data: [],
                    itemWidth:12,
                    itemHeight:12,
                },
                series: [
                    {
                        name: '访问来源',
                        type: 'pie',
                        radius: ['0%', '70%'],
                        center: ['25%', '50%'],
                        avoidLabelOverlap: false,
                        label: {
                            show: false,
                            position: 'center'
                        },
                        emphasis: {
                            label: {
                                show: true,
                                fontSize: 16,
                                fontWeight: 'bold'
                            }
                        },
                        labelLine: {
                            show: false
                        },
                        data: [
                        ]
                    }
                ]
            },
            dialogVisible: false,
            formError: {
                resource: '',
                desc: ''
            },
            inputSearch: '',
            tabPosition: 'left',
            tabChildren: 'top',
            ChildrenItem: 'left',
            headData: {
                buildingNum: 44, // 项目总数
                constructionArea: 2333233, // 建筑面积
                totalAssets: 45, // 资产总套数
                useRate: { // 出租率
                    areaPercentage: 45, // 面积出租率
                    setsPercentage: 15 // 套数出租率
                },
                vacancyRate: { // 空置率
                    constructionArea: 12, // 建筑面积
                    numberAssets: 23 // 资产数量
                },
                controlSituation: { // 空置情况
                    area: 33, // 面积
                    household: 12 // 户数
                },
                propertyCategory: [ // 物业类别占比
                    {value: 335, name: '行政办公'},
                    /*{value: 310, name: '产业用房'},
                    {value: 234, name: '教育'},
                    {value: 135, name: '卫生1'},
                    {value: 1548, name: '文化1'}*/
                ],
                projectPurpose: [ // 项目用途
                    {value: 335, name: '空置'},
                    /*{value: 310, name: '置换'},
                    {value: 234, name: '授权'},
                    {value: 135, name: '借用'},
                    {value: 1548, name: '出租'}*/
                ]
            },
            centered: [
                /*{
                    buildingName: '1栋',
                    landArea: 123, // 用地面积
                    totalAssets: 566, // 资产总数
                    usage: { // 当前楼层房间状态数量
                        vacant: 9, // 空置数
                        replacement: 310, // 置换
                        authorization: 15, // 授权
                        borrow: 9, // 借用
                        rent: 56, // 出租
                    },
                    unitInformations: [
                    ],
                }*/
            ],
            projectId: '',
            buildingId: '',
            unitInformations: [],
						roomStatus: [],
            // usage: {},
            // hxf-0908-物业信息纠错校验
            errorCorrectionRules: {
                resource: [
                    { required: true, message: '请选择纠错类型', trigger: 'blur' },
                ],
                desc: [
                    { required: true, message: '请输入错误描述', trigger: 'blur' },
                    { min: 0, max: 30, message: '长度在 0 到 30 个字符', trigger: 'blur' }
                ]
            },
						roomStatusColor: [
							{
								propertyStatus: '10',
								roomColor: '#c23531'
							},
							{
								propertyStatus: '20',
								roomColor: '#91c7ae'
							},
							{
								propertyStatus: '30',
								roomColor: '#2F4554'
							},
							{
								propertyStatus: '40',
								roomColor: '#d48265'
							},
							{
								propertyStatus: '50',
								roomColor: '#61a0a8'
							},
							{
								propertyStatus: '60',
								roomColor: '#f8ff62'
							},
							{
								propertyStatus: '70',
								roomColor: '#8492c7'
							},
							{
								propertyStatus: '80',
								roomColor: '#c77fb5'
							},
							{
								propertyStatus: '90',
								roomColor: '#2bc73d'
							},
							{
								propertyStatus: '100',
								roomColor: '#902bc7'
							},
						]
        }
    },
    beforeMount() {
        //this.projectId = this.$route.params.id
        // 如果是内嵌页面预览隐藏头部和左侧菜单
        const { id, frame } =  this.$route.query
        !this.isWebView && frame && this.$store.commit('resetWebViewStyle',true)
        this.projectId = id

        this.handleQueryBuildingGeneral()
        this.handleQueryBuildingTab('')
				this.roomStatus = this.getDict('room_status')
    },
    computed: {
        ...mapState(['isWebView'])
    },
    methods:{
        handleECharts() {
            let simplebarLegendArr = []
            this.headData.propertyCategory.map(e => {
                simplebarLegendArr.push(e.name)
            })
            // console.log(simplebarLegendArr)
            this.$set(this.simplebar.legend, 'data', simplebarLegendArr) // 设置侧边显示
            this.$set(this.simplebar.series[0], 'data', this.headData.propertyCategory) // 设置图表数据

            let circularLegendArr = []
            this.headData.projectPurpose.map(e => {
                circularLegendArr.push(e.name)
            })
            // console.log(circularLegendArr)
            this.$set(this.circular.legend, 'data', circularLegendArr) // 设置侧边显示
            this.$set(this.circular.series[0], 'data', this.headData.projectPurpose) // 设置图表数据

            // console.log(this.simplebar, this.circular)
            let propertyCategoryChart = $echarts.init(document.getElementById('pieChart'))
            propertyCategoryChart.setOption(this.simplebar)
            let circularChart = $echarts.init(document.getElementById('circularChart'))
            circularChart.setOption(this.circular)
            window.addEventListener("resize", () => { propertyCategoryChart.resize();});
            window.addEventListener("resize", () => { circularChart.resize();});
        },
        showDialog() {
            this.dialogVisible = true
        },
        beforeClose(done) {
            this.cancel()
            done()
        },
        cancel() {
            this.dialogVisible = false
        },
        commit() {
            this.$refs['formErrorRules'].validate((valid) => {
                if (valid) {
                    //拼装数据
                    let content = "【物业信息概况】" + this.formError.resource + ": "+ this.formError.desc
                    let msg = {
                        "userIdList": [],
                        "sysInfo": {
                            "msgContent": content
                        },
                        "deptList": [39]
                    }
                    sendMsg(msg).then(rep => {
                        this.$message.success('提交成功！')
                        this.cancel()
                    })
                } else {
                    this.$message.error('请完善未填写信息！')
                    return false;
                }
            })
        },
        // 左边查看按钮
        viewClick(item) {
            this.$router.push({name: 'building_look', query: { 'id' : item.buildingId, 'query': +this.isWebView,'sourceType': '2' } })
        },
        handleQueryBuildingGeneral() {
            queryBuildingGeneral(this.projectId).then(res => {
                if (res.data.code === 0) {
                    this.headData = res.data.data
                    this.headData.vacancyRate.constructionArea = parseInt(this.headData.vacancyRate.constructionArea)
                    this.headData.vacancyRate.numberAssets = parseInt(this.headData.vacancyRate.numberAssets)
                    if (this.headData.propertyCategory !== '' || this.headData.propertyCategory !== null || this.headData.propertyCategory !== undefined) {
                        let paramsJson = JSON.stringify(this.headData.propertyCategory);
                        paramsJson = paramsJson.replace(/label/, 'name');
                        this.headData.propertyCategory = JSON.parse(paramsJson);
                    }
                    if (this.headData.propertyPurpose !== '' || this.headData.propertyPurpose !== null || this.headData.propertyPurpose !== undefined) {
                        let projectJson = JSON.stringify(this.headData.propertyPurpose);
                        projectJson = projectJson.replace(/label/, 'name');
                        this.headData.propertyPurpose = JSON.parse(projectJson);
                    }
                }
            })
            this.$nextTick(function () {
                this.handleECharts()
            })
        },
        handleQueryBuildingTab(inputSearch) {
            console.log(this.projectId,inputSearch)
            queryBuildingTab(this.projectId,inputSearch).then(res => {
                if (res.data.code === 0) {
                    this.centered = res.data.data
                    // this.usage = this.centered[0].usage
                    /*console.log('this.centered---',this.centered)
                    console.log('this.centered.usage---',this.centered[0].usage)*/
                }
            })
        },
        handleTabClick(tab) {
            this.buildingId = this.centered[tab.index].buildingId
            queryRoomTab(this.buildingId).then(res => {
                if (res.data.code === 0) {
                    this.centered[tab.index].unitInformations = res.data.data.unitInformations
                    this.centered[tab.index].usage = res.data.data.usage
                }
            })
        },
        handleInputSearch() {
            this.handleQueryBuildingTab(this.inputSearch)
        },
        handleClickBuilding() {
            this.$router.push({name: 'building_manage'})
        },
				// 回显时对应value显示label
				getCardTypeValue(num, sum) {
					if(!sum){
						return 0
					}
					let arr = sum.filter(e => e.propertyStatus === num);
					if (arr.length > 0) {
						return arr[0].num;
					} else {
						return 0;
					}
				},
				// 空置等对应颜色取值
				getTypeValue(num, sum) {
					let arr = sum.filter(e => e.propertyStatus === num);
					if (arr.length > 0) {
						return arr[0].roomColor;
					} else {
						return num;
					}
				}
    },
    components: {
        'v-chart': ECharts,
    },
}
